<template>
	<el-container>
		  <img-detail :img="currentImg" v-show="showDetail"></img-detail>
		  <el-header>
			  <navigation></navigation>
		  </el-header>
		  <router-view/>
	</el-container>
</template>
<script>
import Navigation from './nav/Navigation.vue'
import ImgContainer from './ImgContainer.vue'
import ImgDetail from './ImgDetail.vue'
export default{
	name: "ImageIndex",
	data(){
		return {
			currentImg: {}
		}
	},
	computed:{
		showDetail(){
			return this.$store.getters.getShowImage;
		}
	},
	components:{
		Navigation,
		ImgDetail
	}
}
</script>
<style>
	.el-container{
		margin: 0;
		padding: 0;
		text-align: center;
		width: 100%;
		height: 100vh;
	}
	.el-header{
		/* background-color: rgba(66,185,131,1); */
		background-color: #424153;
		/* 固定顶端 */
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		z-index: 100;
		/* flex布局 */
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/* 顶部变化 */
	.scroll-down-header{
		opacity: 0.5;
		transition: opacity 1.5s;
	}
	.scroll-up-header{
		opacity: 1;
		box-shadow: 0px 4px 5px 0px #318a60;
		transition: box-shadow 1s, opacity 1.5s; 
	}
	/* 媒体查询 */
	@media screen and (max-width:480px) {
		.el-header{
			height: 8vh !important;
		}
	}
	@media screen and (min-width:480px) and (max-width:2400px) {
		.el-header{
			height: 10vh !important;
		}
	}
</style>
